<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <link rel="stylesheet" type="text/css" href="../css/turntable.css" />
</head>
<body>
    <div class="main">
        <div class="turntable">
            <span class="surplus">剩余奖券<span>0</span>张</span>
        </div>
        <div class="content" id="info">
            <!-- <div class="con">
                <ul id="list">
                    <li class="item">
                        <div class="img phone"></div>
                        <div class="name">10奖券</div>
                    </li>
                    <li class="item">
                        <div class="img mac"></div>
                        <div class="name">MackBook</div>
                    </li>
                    <li class="item">
                        <div class="img gift"></div>
                        <div class="name">MackBook</div>
                    </li>
                    <li class="item">
                        <div class="img"></div>
                        <div class="name">3奖券</div>
                    </li>
                    <li class="item">
                        <div class="img"></div>
                        <div class="name">谢谢参与</div>
                    </li>
                    <li class="item">
                        <div class="img"></div>
                        <div class="name">3奖券</div>
                    </li>
                    <li class="item">
                        <div class="img"></div>
                        <div class="name">谢谢参与</div>
                    </li>
                    <li class="item">
                        <div class="img"></div>
                        <div class="name">iPhone</div>
                    </li>
                </ul>
                <ul>
                    <li tapmode="hover" onclick="fnSubmit()" class="nine no-winning"></li>
                </ul>
            </div>
            <div class="last">
                <div class="til">抽奖规则</div>
                <div class="message" id="rule">本次活动采取随机抽奖方式，9月3-10日开奖，中奖用户将收到芯零售下发的中奖短信通知。谢谢您对芯零售的关注，祝您生活愉快。</div>
            </div> -->
        </div>
    </div>
    <!-- 转盘模板 begin -->
    <script type="text/html" id="info-template">
        <div class="con">
                <ul id="list">
                    {{each list}}
                    <li class="item">
                        <div class="img" {{if $value.picture}} style="background-image: url({{$value.picture}});"{{/if}}></div>
                        <div class="name">{{$value.name}}</div>
                    </li>
                    {{/each}}
                </ul>
                <ul>
                    <li tapmode="hover" onclick="fnSubmit()" class="nine no-winning"></li>
                </ul>
            </div>
            <div class="last">
                <div class="til">抽奖规则</div>
                <div class="message" id="rule">{{#rule}}</div>
            </div>
    </script>
    <!-- 转盘模板 end -->
</body>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="../framework/template-web.js"></script>
<script type="text/javascript" src="../framework/zepto.min.js"></script>
<script type="text/javascript" src="../script/base.js"></script>
<script type="text/javascript">
    fnInit();
    var vlist = [];
    function fnInit(){
        fnAjax({
            url: "Draw/listPrize",
            data: {
                id:fnGetUrlParam().id
            },
        }, function(ret){
            if( !ret.status ){
                vlist = ret.data;
                fnValue('#info',template('info-template',ret.data));
                lottery.init();
            }else{
                fnToast(ret.msg);
            }
        })

        fnTime();
    }

    function fnTime(){
        fnAjax({
            url: "Draw/getUserInfo",
            data: {
                active_id:fnGetUrlParam().id
            },
        }, function(ret){
            if( !ret.status ){
                console.log(ret);
                fnValue('.turntable .surplus span',ret.data.draw_time);
            }else{
                fnToast(ret.msg);
            }
        })
    }

    function fnSubmit(){
        // fnStart(3);
        fnAjax({
            url: 'Draw/getWinningCheck',
            data: {
                active_id:fnGetUrlParam().id
            },
        }, function(ret, err){
            if( !ret.status ){
                fnTime();
                for( var x in vlist.list ){
                    if( ret.data.id == vlist.list[x].id ){
                        fnStart(fnToNumber(x),function(){
                            fnToast(ret.data.msg);
                        });
                        return;
                    }
                }
            }else{
                fnToast(ret.msg);
            }
        });
    }


    var lottery = {
        index: 0,    //当前转动到哪个位置，起点位置
        count: 0,     //总共有多少个位置
        timer: 0,     //setTimeout的ID，用clearTimeout清除
        speed_temp: 100,    //初始转动速度
        speed: this.speed_temp,    //初始转动速度
        times: 0,     //转动次数
        cycle: 50,    //转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: 0,    //中奖位置
        init: function(id) {
            if ($('#list').find('li').length > 1) {
                this.obj = $('#list');
                this.count = this.obj.find('li').length;
                this.obj.find('li').eq(this.index).addClass('winning');
                this.speed = this.speed_temp;
            };
        },
        roll: function() {
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            // console.log('roll 调用', this)
            lottery.find('li').eq(index).removeClass('winning');
            index += 1;
            if (index > count - 1) {
                index = 0;
            };
            lottery.find('li').eq(index).addClass('winning');
            this.index = index;
            return false;
        },
        stop: function(index) {
            this.prize = index;
            return false;
        }
    };

    function roll(_cb) {
        // console.log('转动'+lottery.times+'次');
        // 转动次数+1
        lottery.times += 1;
        lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
        // debugAlert(typeof(_cb))
        if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
            clearTimeout(lottery.timer);
            // lottery.prize = -1;
            lottery.times = 0;
            lottery.speed = lottery.speed_temp;
            $('#start').removeClass('no-onclick');
            // console.log('结束', lottery.prize, lottery.index);
            // debugAlert(typeof(_cb))
            _cb&&_cb();
        } else {
            if (lottery.times < lottery.cycle) {
                lottery.speed -= 13;
                // console.log('转动次数小于转动基数', lottery.times, lottery.cycle, lottery.speed);
            } else if (lottery.times == lottery.cycle) {
                // var index = Math.random() * (lottery.count) | 0; //静态演示，随机产生一个奖品序号，实际需请求接口产生
                // lottery.prize = index;
                // console.log('转动次数等于转动基数', lottery.times, lottery.cycle, lottery.prize);
            } else {
                if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                    // console.log('转动次数大于转动基数+10', lottery.times, lottery.cycle);
                    lottery.speed += 110;
                } else {
                    // console.log('转动次数小于转动基数+10', lottery.times, lottery.cycle);
                    lottery.speed += 20;
                }
            }
            if (lottery.speed < 40) {
                lottery.speed = 40;
                // console.log('匀速 40');
            };
            lottery.timer = setTimeout(function(){
                roll(_cb);
            }, lottery.speed); //循环调用
        }
        return false;
    }

    
    function fnStart(_index,_cb){
        if ( ! $('#start').hasClass('no-onclick')) {
            $('#start').addClass('no-onclick');
            lottery.prize = _index;
            // debugAlert(typeof(_cb))
            roll(_cb);
        }
    }

</script>
</html>
